﻿<template>
  <s-layout :title="brandName" :bg-style="{ background: 'linear-gradient(180deg, #fef5f5 0%, #ffffff 50%)' }">
    <!-- 顶部Banner图 -->
    <view class="top-banner">
      <image class="banner-image" src="https://img.mcd.cn/img/2023/12/banner-bg.png" mode="aspectFill"></image>
    </view>

    <!-- 主要功能区 -->
    <view class="main-section">
      <!-- 自助点餐卡片 -->
      <view class="action-card" @click="goToStoreList">
        <view class="card-icon">
          <uni-icons type="shop" size="40" color="#c7000b"></uni-icons>
        </view>
        <view class="card-content">
          <text class="card-title">自助点餐</text>
          <text class="card-subtitle">提前点餐，到店自提</text>
        </view>
        <view class="card-arrow">
          <uni-icons type="forward" size="20" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 我的订单卡片 -->
      <view class="action-card" @click="goToOrders">
        <view class="card-icon">
          <uni-icons type="list" size="40" color="#c7000b"></uni-icons>
        </view>
        <view class="card-content">
          <text class="card-title">我的订单</text>
          <text class="card-subtitle">查看订单进度</text>
        </view>
        <view class="card-arrow">
          <uni-icons type="forward" size="20" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 在线客服卡片 -->
      <view class="action-card" @click="contactService">
        <view class="card-icon">
          <uni-icons type="chatbubble" size="40" color="#c7000b"></uni-icons>
        </view>
        <view class="card-content">
          <text class="card-title">在线客服</text>
          <text class="card-subtitle"></text>
        </view>
        <view class="card-arrow">
          <uni-icons type="forward" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 底部说明 -->
    <view class="bottom-notice">
      <text class="notice-text">本产品为第三方代服务</text>
      <text class="notice-text">即第三方平台代下单服务，与微信官方无关</text>
    </view>
  </s-layout>
</template>

<script setup>
import { ref } from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';

const brandOt = ref(1); // 品牌类型，默认KFC
const brandName = ref('肯德基'); // 品牌名称
const restaurantId = ref(null); // 餐厅ID

onLoad((options) => {
  console.log('【餐厅详情】接收到的参数:', options);

  // 接收餐厅ID
  if (options.restaurantId) {
    restaurantId.value = parseInt(options.restaurantId);
  }
  // 接收品牌类型参数
  if (options.ot) {
    brandOt.value = parseInt(options.ot);
  }
  if (options.cateringName) {
    brandName.value = options.cateringName;
  }
  console.log('餐厅品牌:', brandName.value, '餐厅ID:', restaurantId.value, '类型:', brandOt.value);

  // 更新Store中的餐厅信息
  const cateringStore = sheep.$store('catering');
  const currentStore = cateringStore.storeInfo || {};
  cateringStore.setStore({
    ...currentStore,
    restaurantId: restaurantId.value,
    restaurantName: brandName.value,
    ot: brandOt.value
  });
});

// 跳转到门店列表页
function goToStoreList() {
  // 优先从首页透传或本页携带的城市信息，若无则H5默认洛阳(80)
  const cache = uni.getStorageSync('index-map') || {};
  const cityId = cache.id || 80;
  const cityName = cache.name || '洛阳';
  sheep.$router.go('/pages/catering/store-list', {
    ot: brandOt.value,
    cateringName: brandName.value,
    cityId,
    cityName
  });
}

// 跳转到订单列表
function goToOrders() {
  const cateringStore = sheep.$store('catering');
  console.log('【餐厅详情】当前storeInfo:', cateringStore.storeInfo);
  const shopId = (cateringStore.storeInfo?.shopId || cateringStore.storeInfo?.id) || '';
  console.log('【餐厅详情】跳转我的订单，餐厅ID:', restaurantId.value, '品牌:', brandName.value, 'ot:', brandOt.value, '门店ID:', shopId || '全部门店');

  const params = {
    restaurantId: restaurantId.value || cateringStore.storeInfo?.restaurantId,
    ot: brandOt.value,
    cateringName: brandName.value
  };

  // 只有当shopId有值时才传递（避免空字符串被忽略）
  if (shopId) {
    params.shopId = shopId;
  }

  sheep.$router.go('/pages/catering/order-list', params);
}

// 联系客服
function contactService() {
  uni.showToast({
    title: '客服功能开发中',
    icon: 'none'
  });
}
</script>

<style lang="scss" scoped>
.top-banner {
  width: 100%;
  height: 500rpx;
  position: relative;
  overflow: hidden;

  .banner-image {
    width: 100%;
    height: 100%;
  }
}

.main-section {
  padding: 0 30rpx;
  margin-top: -80rpx;
  position: relative;
  z-index: 10;
}

.action-card {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  }

  .card-icon {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
  }

  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }

    .card-subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }

  .card-arrow {
    opacity: 0.4;
  }
}

.bottom-notice {
  text-align: center;
  padding: 40rpx 30rpx;

  .notice-text {
    display: block;
    font-size: 22rpx;
    color: #999;
    line-height: 1.8;
  }
}
</style>
